<template>
    <div class="container">
        <div class="top">
            <span class="count">实时游客统计</span>
            <img src="@/assets/images/dataScreen-title.png" alt="">
            <span class="order">可预约的总量: 1008611人</span>
            <div class="number">
                <span v-for="(item, index) in personNumber" :key="index">
                    {{ item }}
                </span>
                <span>人</span>
            </div>
        </div>
        <div class="main">
            <div class="ballEcaharts" ref="ballEcahartsEL"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import * as echarts from 'echarts';
import 'echarts-liquidfill'

const personNumber = ref('100086')

const ballEcahartsEL = ref()

const ballEcahartsFun = () => {
    const ballEcaharts = echarts.init(ballEcahartsEL.value);
    ballEcaharts.setOption({
        series: [{
            type: 'liquidFill',
            data: [0.52, 0.3, 0.4],
            color: ['#1db6bd', '#23c5d7', '#19bca2'],
            itemStyle: {
                shadowBlur: 0,
                borderColor: '#11144e'
            },
            radius: '80%',
            outline: {
                borderDistance: 0,
                itemStyle: {
                    borderWidth: 15,
                    borderColor: '#11144e',
                    shadowBlur: 20,
                    shadowColor: 'rgba(69, 255, 243, 1)'
                }
            },
            backgroundStyle: {
                color: 'rgba(255, 255, 255, 0)'
            }
        }]
    });
}

onMounted(() => {
    ballEcahartsFun() // 水球图
})

</script>

<style lang="scss" scoped>
.container {
    width: 90%;
    flex: 1.5;
    background-image: url('@/assets/images/dataScreen-main-lt.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0.5vw 0;

    .top {
        width: 100%;
        height: 35%;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .count {
            display: block;
            font-size: 1vw;
            font-weight: 550;
        }

        img {
            width: 5vw;
            height: 0.5vw;
        }

        .order {
            display: block;
            font-size: 0.8vw;
            font-weight: normal;
            display: flex;
            justify-content: end;
            padding-right: 1vw;
        }

        .number {
            width: 100%;
            display: flex;
            justify-content: center;


            span {
                display: block;
                width: 2.5vw;
                height: 2.5vw;
                margin: 0 0.1vw;
                text-align: center;
                line-height: 2.5vw;
                background-image: url('@/assets/images/total.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                font-weight: 600;
                font-size: 1vw;
            }
        }
    }


    .main {
        width: 100%;
        height: 65%;

        .ballEcaharts {
            width: 100%;
            height: 100%;
        }
    }
}
</style>